<template>
  <div class="goods">
    <div class="header">
      <div class="goods-header">
        <svg
          @click="$router.back()"
          t="1671414539680"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1744"
          width="200"
          height="200"
        >
          <path
            d="M643.84 164.885333a22.122667 22.122667 0 0 0-0.362667-30.72 20.522667 20.522667 0 0 0-29.674666 0.362667L256 512.810667l357.802667 378.304c8.042667 8.533333 21.290667 8.746667 29.674666 0.341333 8.32-8.32 8.533333-22.016 0.384-30.72L316.330667 512.832l327.530666-347.946667z"
            fill="#3D3D3D"
            p-id="1745"
          ></path>
        </svg>
        <div class="search">
          <img
            src="https://image-mall.gxptkc.com/m/resources/search.png"
            alt=""
          />
          <input
            type="text"
            placeholder="请输入关键词"
            v-model="text"
            @click="$router.push('/search')"
          />
          <img
            @click="$router.push('/search')"
            v-if="text"
            src="https://image-mall.gxptkc.com/m/resources/input_clear.png"
            alt=""
          />
        </div>
      </div>
      <div class="rank">
        <ul>
          <li>
            <span :class="{ active: sore == 0 }" @click="toAllTotal">综合</span>

            <svg
              v-if="sore == 0"
              t="1671438316234"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="20917"
              width="200"
              height="200"
            >
              <path
                d="M325.456471 862.280661"
                fill="#d81e06"
                p-id="20918"
              ></path>
              <path
                d="M882.057788 862.280661"
                fill="#d81e06"
                p-id="20919"
              ></path>
              <path
                d="M236.028491 877.160382"
                fill="#d81e06"
                p-id="20920"
              ></path>
              <path
                d="M960.132455 877.160382"
                fill="#d81e06"
                p-id="20921"
              ></path>
              <path
                d="M63.683483 788.736998"
                fill="#d81e06"
                p-id="20922"
              ></path>
              <path
                d="M958.469023 788.736998"
                fill="#d81e06"
                p-id="20923"
              ></path>
              <path d="M64.77753 858.792098" fill="#d81e06" p-id="20924"></path>
              <path
                d="M163.396533 289.168875c-40.577772 0-66.525252 54.184545-35.441258 85.258218L477.217578 723.704878c20.031716 20.031716 49.823841 20.031716 69.853837 0l349.274345-349.277785c30.304744-30.294423 6.677812-85.258218-34.928639-85.258218L163.396533 289.168875 163.396533 289.168875z"
                fill="#d81e06"
                p-id="20925"
              ></path>
              <path
                d="M959.523505 858.792098"
                fill="#d81e06"
                p-id="20926"
              ></path>
            </svg>
            <svg
              v-else
              t="1671438489325"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="25158"
              width="200"
              height="200"
            >
              <path
                d="M325.456471 862.280661"
                fill="#2c2c2c"
                p-id="25159"
              ></path>
              <path
                d="M882.057788 862.280661"
                fill="#2c2c2c"
                p-id="25160"
              ></path>
              <path
                d="M236.028491 877.160382"
                fill="#2c2c2c"
                p-id="25161"
              ></path>
              <path
                d="M960.132455 877.160382"
                fill="#2c2c2c"
                p-id="25162"
              ></path>
              <path
                d="M63.683483 788.736998"
                fill="#2c2c2c"
                p-id="25163"
              ></path>
              <path
                d="M958.469023 788.736998"
                fill="#2c2c2c"
                p-id="25164"
              ></path>
              <path d="M64.77753 858.792098" fill="#2c2c2c" p-id="25165"></path>
              <path
                d="M163.396533 289.168875c-40.577772 0-66.525252 54.184545-35.441258 85.258218L477.217578 723.704878c20.031716 20.031716 49.823841 20.031716 69.853837 0l349.274345-349.277785c30.304744-30.294423 6.677812-85.258218-34.928639-85.258218L163.396533 289.168875 163.396533 289.168875z"
                fill="#2c2c2c"
                p-id="25166"
              ></path>
              <path
                d="M959.523505 858.792098"
                fill="#2c2c2c"
                p-id="25167"
              ></path>
            </svg>
          </li>
          <li>
            <span @click="toChangeSore" :class="{ active: sore == 1 }"
              >销量</span
            >
          </li>
          <li>
            <span @click="toShop" :class="{ active: sore == 2 }">店铺</span>
          </li>
          <li :class="{ active2: sore == 2 }" @click="filterHandler">
            <span>筛选</span>
            <svg
              v-if="sore != 2"
              t="1671438375820"
              class="icon"
              viewBox="0 0 1025 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="24226"
              width="200"
              height="200"
            >
              <path
                d="M707.101 84a57.559 57.559 0 0 1 35 11.862c25.211 19.31 29.98 55.384 10.65 80.57l-240.649 313.56v367.325a43.64 43.64 0 0 1-4.632 19.566l-0.52 1.006c-11.374 21.277-37.858 29.316-59.157 17.954L340.92 838.83c-26.222-13.989-42.598-41.272-42.598-70.97V491.217L55.933 176.51a57.432 57.432 0 0 1-11.922-33.893L44 141.467C44 109.729 69.754 84 101.522 84z m192.987 694.197c16.52 0 29.912 13.38 29.912 29.883 0 16.268-13.012 29.5-29.206 29.874l-0.706 0.008H614.771c-16.52 0-29.911-13.378-29.911-29.882 0-16.268 13.012-29.5 29.205-29.875l0.706-0.008h285.317z m0-160.906c16.52 0 29.912 13.378 29.912 29.882 0 16.268-13.012 29.5-29.206 29.875l-0.706 0.008H614.771c-16.52 0-29.911-13.38-29.911-29.883 0-16.268 13.012-29.5 29.205-29.874l0.706-0.008h285.317z m0-160.907c16.52 0 29.912 13.379 29.912 29.883 0 16.268-13.012 29.5-29.206 29.874l-0.706 0.008H614.771c-16.52 0-29.911-13.379-29.911-29.882 0-16.268 13.012-29.5 29.205-29.875l0.706-0.008h285.317z"
                fill="#333333"
                p-id="24227"
              ></path>
            </svg>
            <svg
              v-else
              t="1671438375820"
              class="icon"
              viewBox="0 0 1025 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="24226"
              width="200"
              height="200"
            >
              <path
                d="M707.101 84a57.559 57.559 0 0 1 35 11.862c25.211 19.31 29.98 55.384 10.65 80.57l-240.649 313.56v367.325a43.64 43.64 0 0 1-4.632 19.566l-0.52 1.006c-11.374 21.277-37.858 29.316-59.157 17.954L340.92 838.83c-26.222-13.989-42.598-41.272-42.598-70.97V491.217L55.933 176.51a57.432 57.432 0 0 1-11.922-33.893L44 141.467C44 109.729 69.754 84 101.522 84z m192.987 694.197c16.52 0 29.912 13.38 29.912 29.883 0 16.268-13.012 29.5-29.206 29.874l-0.706 0.008H614.771c-16.52 0-29.911-13.378-29.911-29.882 0-16.268 13.012-29.5 29.205-29.875l0.706-0.008h285.317z m0-160.906c16.52 0 29.912 13.378 29.912 29.882 0 16.268-13.012 29.5-29.206 29.875l-0.706 0.008H614.771c-16.52 0-29.911-13.38-29.911-29.883 0-16.268 13.012-29.5 29.205-29.874l0.706-0.008h285.317z m0-160.907c16.52 0 29.912 13.379 29.912 29.883 0 16.268-13.012 29.5-29.206 29.874l-0.706 0.008H614.771c-16.52 0-29.911-13.379-29.911-29.882 0-16.268 13.012-29.5 29.205-29.875l0.706-0.008h285.317z"
                fill="#ddd"
                p-id="24227"
              ></path>
            </svg>
          </li>
        </ul>
        <div class="toggle">
          <svg
            @click="isshow = false"
            v-if="isshow"
            t="1671425379452"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="18998"
            width="200"
            height="200"
          >
            <path
              d="M51.2 563.2m51.2 0l307.2 0q51.2 0 51.2 51.2l0 307.2q0 51.2-51.2 51.2l-307.2 0q-51.2 0-51.2-51.2l0-307.2q0-51.2 51.2-51.2Z"
              p-id="18999"
              fill="#2c2c2c"
            ></path>
            <path
              d="M563.2 51.2m51.2 0l307.2 0q51.2 0 51.2 51.2l0 307.2q0 51.2-51.2 51.2l-307.2 0q-51.2 0-51.2-51.2l0-307.2q0-51.2 51.2-51.2Z"
              p-id="19000"
              fill="#2c2c2c"
            ></path>
            <path
              d="M563.2 563.2m30.72 0l348.16 0q30.72 0 30.72 30.72l0 0q0 30.72-30.72 30.72l-348.16 0q-30.72 0-30.72-30.72l0 0q0-30.72 30.72-30.72Z"
              fill="#2c2c2c"
              p-id="19001"
            ></path>
            <path
              d="M563.2 737.28m30.72 0l266.24 0q30.72 0 30.72 30.72l0 0q0 30.72-30.72 30.72l-266.24 0q-30.72 0-30.72-30.72l0 0q0-30.72 30.72-30.72Z"
              fill="#2c2c2c"
              p-id="19002"
            ></path>
            <path
              d="M563.2 911.36m30.72 0l184.32 0q30.72 0 30.72 30.72l0 0q0 30.72-30.72 30.72l-184.32 0q-30.72 0-30.72-30.72l0 0q0-30.72 30.72-30.72Z"
              fill="#2c2c2c"
              p-id="19003"
            ></path>
            <path
              d="M51.2 51.2m51.2 0l307.2 0q51.2 0 51.2 51.2l0 307.2q0 51.2-51.2 51.2l-307.2 0q-51.2 0-51.2-51.2l0-307.2q0-51.2 51.2-51.2Z"
              p-id="19004"
              fill="#2c2c2c"
            ></path>
          </svg>
          <svg
            @click="isshow = true"
            v-else
            t="1671424907524"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8078"
            width="200"
            height="200"
          >
            <path
              d="M127.99 127.97h320v320h-320zM575.99 127.97h384v128h-384zM575.99 319.97h384v128h-384zM575.99 575.97h384v128h-384zM575.99 767.97h384v128h-384zM127.99 575.97h320v320h-320z"
              fill="#231815"
              p-id="8079"
            ></path>
          </svg>
        </div>
      </div>
      <div class="select"></div>
    </div>
    <LoadingView v-if="showLoading" />
    <div class="box" style="height: 90rem; width: 100vw"></div>

    <div v-if="!showLoading">
      <div class="goodlist-content" v-if="sore != 2" ref="goodsBox">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :offset="1"
          :immediate-check="true"
        >
          <div class="goodslist">
            <li
              v-for="(item, index) in goodsList"
              :key="index"
              :class="isshow ? 'list1' : 'list2'"
              @click="
                $router.push({
                  path: '/product',
                  query: {
                    goodsId: item.goodsId,
                    productId: item.defaultProductId,
                  },
                })
              "
            >
              <img :src="item.goodsImage" alt="" />
              <div class="item">
                <div class="item-top">
                  <p class="title">{{ item.goodsName }}</p>
                  <p class="address">{{ item.goodsBrief }}</p>
                  <span>￥{{ item.goodsPrice.toFixed(2) }}</span>
                </div>
                <div class="item-bottom">
                  <span>{{ item.saleNum }}人付款</span>
                  <div
                    @click.stop="
                      $router.push({
                        path: '/store',
                        query: { storeid: item.storeId },
                      })
                    "
                  >
                    <span>{{ item.storeName }}</span>
                    <span>进店</span>
                    <svg
                      t="1671435591338"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="19984"
                      width="200"
                      height="200"
                    >
                      <path
                        d="M305.587883 813.744345c-14.09502 12.824073-15.126512 34.658358-2.303462 48.752354 12.843516 14.09502 34.678824 15.126512 48.752354 2.302439l364.835266-332.676845c14.114462-12.844539 15.127536-34.659381 2.302439-48.753377-0.733711-0.815575-1.486864-1.588171-2.302439-2.302439l-0.078795-0.080841-0.13917-0.13917L352.037798 148.369166c-14.074553-12.824073-35.909861-11.791557-48.752354 2.302439-12.824073 14.09502-11.792581 35.930327 2.303462 48.753377l336.845795 307.168891L305.588907 813.743322 305.587883 813.744345 305.587883 813.744345z"
                        fill="#272536"
                        p-id="19985"
                      ></path>
                    </svg>
                  </div>
                </div>
              </div>
            </li>
          </div>
        </van-list>
        <div class="lostGoods" v-if="showEmpty">
          <img
            src="https://image-mall.gxptkc.com/m/resources/empty_goods.png"
            alt=""
          />
          <p>暂无数据</p>
        </div>
      </div>

      <div v-else class="store">
        <ShopPage
          v-for="shop in shopList"
          :key="shop.storeId"
          :shop="shop"
        ></ShopPage>
      </div>

      <FilterView
        :filterList="filterList"
        :text="text"
        @change-goods-length="changeGoodsLength"
      />
    </div>
  </div>
</template>

<script>
import ShopPage from "@/components/ShopPage.vue";

import FilterView from "@/components/FilterView.vue";
import LoadingView from "@/components/LoadingView.vue";
import { mapMutations, mapState } from "vuex";

import { Toast } from "vant";
import Vue from "vue";
import { PullRefresh } from "vant";
import { List } from "vant";
import { Cell } from "vant";

Vue.use(List);
Vue.use(Cell);
Vue.use(Toast);
Vue.use(PullRefresh);
export default {
  components: { ShopPage, FilterView, LoadingView },
  data() {
    return {
      isshow: false, //展示商铺或者商品
      goodsList: [], //商品列表
      sore: 0, //商品排序类别
      shopList: [], //商铺列表
      filterList: [], //筛选条件列表
      showEmpty: false,
      showLoading: true,
      isLoading: false,

      loading: false,
      finished: false,
      current: 1,
      nowIsLoading: false,

      goodsLength: 100,
      //是否有筛选条件

      shopCurrent: 1,

      //条件
      categoryId: this.$route.query.categoryId || "",
      text: this.$route.query.text || "", //搜索
    };
  },
  computed: {
    ...mapState(["filterGoodsList", "ishasfilterCondition"]),
  },
  watch: {
    filterGoodsList(newVal) {
      this.goodsList = newVal;
    },
    goodsList(val) {
      if (val?.length == 0 || !val) {
        this.showEmpty = true;
      } else {
        this.showEmpty = false;
      }

      if (this.goodsList.length >= this.goodsLength) {
        this.finished = true;
      } else {
        this.finished = false;
      }
    },
  },
  async created() {
    this.hasfilterCondition(false);
    let res = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/goods/front/goods/goodsList?pageSize=10&current=${this.current}&sort=0&categoryIds=${this.categoryId}&keyword=${this.text}`
    );
    this.current += 1;

    this.goodsList = res.data.data.list;

    this.goodsLength = res.data.data?.pagination.total;

    let filterRes = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/goods/front/goods/category/screenList?categoryId=${this.categoryId}`
    );
    this.filterList = filterRes.data.data;

    this.showLoading = false;
  },
  methods: {
    ...mapMutations([
      "changeFilterShow",
      "filterToLoginGoodsHandler",
      "hasfilterCondition",
    ]),
    async requestShopList() {
      let res = await this.axios.get(
        `https://m-mall.gxptkc.com/v3/seller/front/store/list?pageSize=10&current=${this.shopCurrent}&keyword`
      );

      this.shopList = res.data.data.list;
      this.shopCurrent += 1;
    },
    async toAllTotal() {
      this.current = 1; //重置页码
      this.$refs.goodsBox.scrollTop = 0;
      console.log(this.$refs.goodsBox.scrollTop);

      this.sore = 0;
      this.hasfilterCondition(false); //无筛选条件

      //相当于刷新
      let res = await this.axios.get(
        `https://m-mall.gxptkc.com/v3/goods/front/goods/goodsList?pageSize=10&current=${this.current}&sort=0&categoryIds=${this.categoryId}&keyword=${this.text}`
      );
      this.current += 1;

      this.goodsList = res.data.data.list;
      this.goodsLength = res.data.data?.pagination.total;

      this.showLoading = false;
    },
    changeGoodsLength(length) {
      //修改筛选后的商品长度
      this.goodsLength = length;
    },
    async toChangeSore() {
      //销量排列
      this.sore = 1;
      this.goodsList = this.goodsList.sort((a, b) => {
        b.saleNum - a.saleNum;
      });
    },

    async toShop() {
      //店铺
      this.sore = 2;
      this.requestShopList();
    },
    filterHandler() {
      this.changeFilterShow(true);
    },

    //触底加载
    async onLoad() {
      if (!this.nowIsLoading) {
        this.nowIsLoading = true;

        let res = null;

        if (!this.ishasfilterCondition) {
          console.log("加载1次");
          res = await this.axios.get(
            `https://m-mall.gxptkc.com/v3/goods/front/goods/goodsList?pageSize=10&current=${this.current}&sort=0&categoryIds=${this.categoryId}&keyword=${this.text}`
          );
          this.current += 1;

          // console.log(res);
          this.goodsList = [...this.goodsList, ...res.data.data.list];
        } else {
          this.filterToLoginGoodsHandler(true);
        }

        this.nowIsLoading = false;
        this.loading = false;
      }
    },
    onLoadShop() {
      console.log("商铺触底");
      this.loading1 = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.goods {
  // padding-top: 10rem;
  box-sizing: border-box;
  position: relative;
  background-color: rgb(245, 245, 245);

  .header {
    box-sizing: border-box;
    width: 100vw;
    position: fixed;

    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 90rem;
    background-color: #fff;

    .goods-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10rem;
      box-sizing: border-box;

      svg {
        width: 24rem;
        height: 20rem;
      }

      .search {
        border-radius: 20rem;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.04);
        display: flex;
        justify-content: left;
        align-items: center;
        width: 85vw;

        img {
          width: 18rem;
          height: 18rem;
          margin-left: 10rem;

          &:last-child {
            margin-left: 0;
          }
        }

        input {
          width: 70vw;
          height: 32rem;
          border: none;
          background-color: rgba(0, 0, 0, -0);
        }
      }
    }

    .rank {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10rem 0 0;
      padding: 0 10rem;
      box-sizing: border-box;

      > ul {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;

        li {
          width: 25%;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            font-size: 15rem;

            &.active {
              color: red;
            }
          }

          > svg {
            width: 15rem;
            height: 15rem;
            margin-left: 3rem;
          }

          &.active2 {
            color: #ddd;
            pointer-events: none;
          }
        }
      }

      .toggle {
        height: 20rem;
        padding-left: 8rem;
        border-left: 1px solid #ccc;

        svg {
          width: 20rem;
          height: 20rem;
        }
      }
    }
  }

  .goodlist-content {
    height: calc(100vh - 90rem);
    // background-color: rgba(0, 0, 0, 0.04);
    overflow: auto;
    .goodslist {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 10rem;
      box-sizing: border-box;
      // background-color: rgba(0, 0, 0, 0.04);

      li {
        background-color: #fff;
        display: flex;
        margin-bottom: 10rem;
        border-radius: 8rem;
        overflow: hidden;

        .item {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 8rem;
          box-sizing: border-box;

          .item-top {
            :nth-child(1) {
              font-size: 15rem;
              color: #2d2d2d;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            :nth-child(2) {
              color: #999;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin: 3rem 0 10rem 0;
            }

            :nth-child(3) {
              font-size: 17rem;
              color: #fc1c1c;
            }
          }

          .item-bottom {
            > span {
              color: #999;
            }

            > div {
              display: flex;
              align-items: center;
              margin-top: 10rem;

              span {
                color: #666;

                &:nth-child(1) {
                  // width: 108rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                &:nth-child(2) {
                  color: #333;
                  font-weight: bold;
                  margin: 0 4rem;
                  white-space: nowrap;
                }
              }

              > svg {
                width: 10rem;
                height: 10rem;
              }
            }
          }
        }

        &.list1 {
          width: 100%;
          display: flex;
          flex: left;

          img {
            width: 145rem;
            height: 145rem;
            border-radius: 8rem;
          }

          .item {
            width: calc(100% - 145rem);

            .item-top {
              width: 100%;

              p.title {
                //   width: 100rem;
              }
            }
          }
        }

        &.list2 {
          width: 172rem;
          height: 350rem;
          flex-direction: column;
          justify-content: left;

          img {
            width: 172rem;
            height: 172rem;
            border-radius: 8rem;
          }
        }
      }

      .van-list__finished-text {
        display: flex;
        justify-content: center;
      }
    }

    .lostGoods {
      display: flex;
      flex-direction: column;
      align-items: center;
      // padding: 50rem 0;
      // height: 100vh;
      // background-color: rgba(0, 0, 0, 0.04);

      img {
        width: 105rem;
        height: 105rem;
      }

      p {
        font-size: 13rem;
        color: #999;
        margin-top: 20rem;
      }
    }
  }

  .store {
    background-color: rgba(0, 0, 0, 0.04);
    padding: 10rem;
    // border-radius: 10rem;
  }
}
</style>